<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>主页</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
          integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
          crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <link rel="stylesheet" href="./css/响应式与下导航修改版.css">
    <link rel="shortcut icon" href="" type="image/x-icon" />
    <link rel="icon" type="image/png" href="./img/logo-small.png">
    <link rel="stylesheet" href="./css/dropload.css">
    <style>
        ol,
        ul {
            padding-left: 0rem;
        }
    </style>
</head>
<body>
<div class="bigbox">
    <div class="logo">
        <i><ion-icon name="logo-firebase"></ion-icon></i>
        <span class="a" style="font-family: '微软雅黑';">Hello</span>
    </div>
    <div class="nav">
        <ul class="nav-links">
            <div class="boxli">
                <li>
                    <a href="#">
                        <ion-icon name="home-outline"></ion-icon>
                        <a href="#" class="link_name cut" onclick="html('home',1)">主页</a>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <ion-icon name="person-add-outline"></ion-icon>
                        <a href="#" class="link_name" onclick="html('rank',2)">用户</a>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <ion-icon name="chatbubble-outline"></ion-icon>
                        <a href="#" class="link_name" onclick="html('message',3)">消息</a>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <ion-icon name="camera-outline"></ion-icon>
                        <a href="#" class="link_name" onclick="html('upload',4)">发布</a>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <ion-icon name="person-outline"></ion-icon>
                        <a href="#" class="link_name" onclick="html('person',5)">个人</a>
                    </a>
                </li>
            </div>
        </ul>
    </div>

    <div class="close">
        <a href="#" style="text-align: center;"><i class="fa-solid fa-bars"></i></a>
    </div>
    <div class="down">
        <div class="userimg"><img src="${user.userimg == null ? './img/7e72c58637ff26df68fb30939de078d2bbbfcdbe.jpg' : user.userimg}" style="object-fit: cover"></div>
        <a href="./login.jsp"><i class="bx bx-log-in"></i></a>
    </div>
</div>

<div class="bigboxright">
    <div class="rightnav">
        <a href="logout"><i class="bx bx-log-out"></i></a>
    </div>
</div>

<div class="bigboxcenter">
    <iframe src="./home.jsp" scrolling="auto" id="myiframe"></iframe>
</div>
<div class="ALL">
    <div class="HomePage arrow act">
        <!-- <p style="position: absolute;left: 50%;top: 5px;transform: translateX(-50%);color: rgba(0, 0, 0, 0.1);font-family: 宋体;">主页</p> -->
        <div class="logo">
            <!-- <img src="../img/logo-small.png" alt="" style="width: 30px;height: 30px;"/> -->
            <ion-icon name="logo-firebase" style="font-size: 30px;color: #000;"></ion-icon>
        </div>
        <div class="register">
            <a href="./login.jsp"
               style="text-decoration: none;color: black;border: 1px solid black;padding: 5px;">注册</a>
        </div>
        <div class="home_image">
            <img src="./img/9CFE9FC6061EC17F42A9E872FD6F8BB1.jpg" alt="" />
        </div>
        <div class="search">
            <nav class="navbar bg-body-tertiary">
                <div class="container-fluid">
                    <form class="d-flex" role="search">
                        <input class="form-control me-2" type="search" placeholder="搜索" aria-label="Search">
                        <button class="btn btn-outline-success" type="submit"><i
                                class='bx bx-search'></i></button>
                    </form>
                </div>
            </nav>
        </div>
    </div>
    <div class="Ranking arrow">

    </div>
    <div class="Messages arrow">

    </div>
    <div class="Photos arrow">

    </div>
    <div class="PerInfor arrow">
        <div class="user">
            <div class="user-top">
                <img src="${user.userimg == null ? './img/7e72c58637ff26df68fb30939de078d2bbbfcdbe.jpg' : user.userimg}" alt="" style="object-fit: cover"/>
                <div class="name">
                    <p style="display: block;background-color: #fff;margin-bottom: 10px;font-size: 30px;">${user.username == null ? '未登录':user.username}
                    </p>
                    <div class="level">
                        <p style="margin-right: 20px;">硬币：${user.coin == null ? '0':user.coin}</p>
                        <p>LV：${user.level == null ? '0':user.level}</p>
                    </div>
                </div>

                <p style="position: absolute;border-top: 2px solid black;">个人签名：${user.signature == null ? '暂无':user.signature}</p>
                <i class='bx bx-chevron-right' style="color: black;" onclick="show_personSpace()"></i>
            </div>
            <div class="user-bottom">
                <div class="userlist">
                    <a href=""><b>浏览记录</b></a>
                </div>
                <div class="userlist">
                    <a href=""><b>购买记录</b></a>
                </div>
                <div class="userlist">
                    <a href="collect"><b>收藏</b></a>
                </div>
                <div class="userlist">
                    <a href="#" onclick="show_setting()"><b>设置</b></a>
                </div>
            </div>
        </div>
        <div class="setting">
            <i class='bx bx-chevron-left' onclick="show_user()" style="color: #000;"></i>
            <div class="settinglist">
                <b><a href="changePass.jsp" style="text-decoration: none;color: #000;">修改密码</a></b>
            </div>
            <div class="settinglist">
                <b><a href="./login.jsp" style="text-decoration: none;color: #000;">切换账号</a></b>
            </div>
            <div class="settinglist">
                <b><a href="logout" style="text-decoration: none;color: #000">退出登录</a></b>
            </div>
        </div>
        <div class="space">
            <i class='bx bx-chevron-left' onclick="show_user()"
               style="background-color:rgba(0, 0, 0, 0.5) ;border-radius: 40px;"></i>
            <div class="userspace">
                <div style="width: 100%;height: 15vh;">
                    <img width="100%" height="100%" src="./img/7E50A8CD331E8E3D67BD348DA9762B07.jpg" alt="" />
                </div>
                <div class="usertop">
                    <div style="width: 80px;height: 80px;">
                        <img width="100%" height="100%"
                             src="${user.userimg == null ? './img/7e72c58637ff26df68fb30939de078d2bbbfcdbe.jpg' : user.userimg}" alt="" />
                    </div>
                    <ul>
                        <li id="nonepoint">
                            <p>${user.fans == null ? '0':user.fans}</p><b>粉丝</b>
                        </li>
                        <li>
                            <p>${user.guanzhu == null ? '0':user.guanzhu}</p><b>关注</b>
                        </li>
                        <li>
                            <p>${user.huozan == null ? '0':user.huozan}</p><b>获赞</b>
                        </li>
                    </ul>
                    <button><a href="./editorialmaterial.jsp" style="text-decoration: none;color: #000;">编辑资料</a></button>
                </div>
                <div class="usercenter">
                    <div class="username">
                        <h1>${user.username == null ? '未登录':user.username}</h1>
                        <p style="padding-top: 10px;position: absolute;right: 20px;">UID：${user.userId == null ? '0':user.userId}</p>
                    </div>
                </div>
                <hr style="margin-top: 0px;margin-bottom: 10px;">
                <div class="userbottom" style="text-align: center;">
                    <ul>
                        <li class="l">
                            <p>关注</p>
                        </li>
                        <li class="l">
                            <p>动态</p>
                        </li>
                        <li class="l">
                            <p>收藏</p>
                        </li>
                    </ul>
                </div>
                <hr style="margin-top: 10px;">
            </div>
        </div>
        <div class="SwitchAccount">
            <i class='bx bx-chevron-left' onclick="show_user()"></i>
        </div>
    </div>
</div>

<div class="navigation">
    <ul>
        <li class='list active'>
            <a href="#" onclick="html('home',1)">
                <span class="icon"><ion-icon name="home-outline"></ion-icon></span>
                <span class="text">主页</span>
            </a>
        </li>
        <li class='list'>
            <a href="#" onclick="html('rank',2)">
<%--                <span class="icon"><i class="bx bx-bar-chart-alt-2"></i></span>--%>
<%--                <span class="text">排名</span>--%>
                <span class="icon"><i class='bx bx-user-plus'></i></span>
                <span class="text">用户</span>
            </a>
        </li>
        <li class='list'>
            <a href="#" onclick="html('message',3)">
                <span class="icon"><ion-icon name="chatbubble-outline"></ion-icon></span>
                <span class="text">消息</span>
            </a>
        </li>
        <li class='list' onclick="html('upload',4)">
            <a href="#">
                <span class="icon"><ion-icon name="camera-outline"></ion-icon></span>
                <span class="text">发布</span>
            </a>
        </li>
        <li class='list' onclick="html('home',5)">
            <a href="#">
                <span class="icon"><ion-icon name="person-outline"></ion-icon></span>
                <span class="text">个人</span>
            </a>
        </li>
        <div class="indicaotr"></div>
    </ul>
</div>
</body>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<script src="./js/clickshow.js"></script>
<%--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>--%>
<script src="./js/zepto.min.js"></script>
<script src="./js/dropload.min.js"></script>
<script>
    // //上拉加载
    // var dropload = $('body').dropload({
    //     scrollArea : window,
    //     domUp: {
    //         domClass: 'dropload-up',
    //         domRefresh: '<div class="dropload-refresh">↓下拉刷新</div>',
    //         domUpdate: '<div class="dropload-update">↑释放更新</div>',
    //         domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
    //     },
    //     loadUpFn: function () {
    //
    //         console.log(11)
    //         $.ajax({
    //             type: 'GET',
    //             success: function () {
    //                 console.log(1);
    //                 setTimeout(function () {
    //                     dropload.resetload();
    //                 }, 1000)
    //             },
    //             error: function (xhr, type) {
    //                 alert('Ajax error!');
    //                 // 即使加载出错，也得重置
    //                 dropload.resetload();
    //             }
    //         })
    //     },
    // })

    //iframe窗口
    function html(type, index) {
        var links = document.querySelectorAll('.link_name')
        for (var i = 0; i < links.length; i++) {
            if ((index - 1) == i) {
                links[i].classList.add('cut')
            } else {
                links[i].classList.remove('cut')
            }
        }
        var ifram = document.querySelector('iframe')
        var BigBoxCenter = document.querySelector('.bigboxcenter');
        if (type == "home" && index == 5) {
            BigBoxCenter.classList.add('none');
            ifram.src = './' + type + '.jsp';
        } else {
            BigBoxCenter.classList.remove('none');
            ifram.src = './' + type + '.jsp';
        }
    }

    //导航
    let bigbox = document.querySelector(".bigbox");
    let close = document.querySelector(".close");
    let bigboxright = document.querySelector(".bigboxright");

    const toggleClose = document.querySelector('.close');
    let toggleCloseIcon = document.querySelector('.close i');
    toggleClose.onclick = function() {
        const isOpen = bigbox.classList.contains('closeMenu');
        toggleCloseIcon.classList = isOpen ? 'fa-solid fa-bars' : 'fa-solid fa-xmark';
    }

    var bigboxcenter = document.querySelector('.bigboxcenter')
    var ifram = document.querySelector('iframe')
    close.addEventListener("click", () => {
        bigbox.classList.toggle("closeMenu");
        bigboxright.classList.toggle("closeMenu");
        // bigboxcenter.classList.toggle('cl');
        ifram.classList.toggle('cl');
    });




    //移动端
    let list = document.querySelectorAll('.list');
    let arrow = document.querySelectorAll('.arrow');
    function activeLink() {
        list.forEach((item) => item.classList.remove('active'));
        this.classList.add('active');

        // 获取当前点击的索引
        const index = Array.from(list).indexOf(this);
        // 更新箭头的激活状态
        arrow.forEach((item, idx) => {
            if (idx === index) {
                item.classList.add('act'); // 添加 act 类
            } else {
                item.classList.remove('act'); // 移除 act 类
            }
        });
    }
    list.forEach((item) => item.addEventListener('click', activeLink));

</script>
</html>